<template>
  <van-nav-bar title="BBL提现记录" left-text="" left-arrow @click-left="onClickLeft" fixed placeholder />
  <div class="main">
    <van-list v-model:loading="loading" :finished="finished" finished-text="加载完成" @load="onLoad">
      <van-cell class="cell" v-for="(item, index) in list" :key="index" :border="false">
        <template #title>
          <div class="info">
            <!-- <div class="leftIcon">
              <img src="@/assets/my/cions.png" alt="">
            </div> -->
            <div class="values">
              <div class="infoUp">
                <div class="value">{{ item.type ? item.amount : KeepDecimal(BigToSmall.chufa(item.amount, 18), 4) }}</div>
                <div class="unit">{{ item.tokenName }}</div>
              </div>
              <div class="time">{{ item.createdTime }}</div>
            </div>
          </div>
        </template>
        <template #right-icon>
          <van-button class="btn" v-if="item.unavailable == 0" color="linear-gradient(90deg, #52A952, #40A5DB)"
            @click="Reward(item)" :loading="item.loading">
            提现
          </van-button>
          <div class="btnText" v-else>成功</div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>
<script setup name="Withdrawal" lang="ts">
import { ref, computed, toRaw } from 'vue'
import { claimPage } from "@/api/request";
import * as BigToSmall from "@/utils/BNUtils.js";
import contractStore from "@/store/modules/contract";
import { Toast } from 'vant'
import { KeepDecimal } from "@/utils/filter";

interface data {
  amount: string,
  createdTime: string,
  unavailable: number,
  tokenName: string,
  loading: boolean,
  type: number
}
const appStore = contractStore();
const onClickLeft = () => history.back()
const list = ref<data[]>([]);
const loading = ref(false);
const finished = ref(false);
const main = computed(() => appStore.contractInstance)
const address = computed(() => toRaw(appStore.address))
const page = ref(1)
const onLoad = async () => {
  let res = await claimPage({ page: page.value })
  let data = res.data
  if (res.status == 200) {
    if (page.value == 1) {
      list.value = []
    }
    loading.value = false;
    data.records.forEach((element: { loading: boolean; }) => {
      element.loading = false
    });
    list.value = list.value.concat(data.records)
    if (data.records.length < 20) {
      finished.value = true;
    } else {
      page.value++
    }
  }
};
const Reward = async (val: any) => {
  console.log(val.tokenAddress, val.address, val.amount, val.sign)
  val.loading = true
  try {
    main.value.methods.claim(val.tokenAddress, val.address, val.amount, val.sign).send({
      from: address.value
    }).then((res: any) => {
      Toast('领取成功')
      val.loading = false
      onLoad()
    }).catch((err: any) => {
      console.log(err)
      val.loading = false
    })
  } catch (error) {
    val.loading = false
  }
}
</script>
<style scoped lang="less">
.cell {
  padding: 15px 10px 15px 10px;
}

.main {
  min-height: calc(100vh - 46px);
  // padding: 0 15px;
  padding-bottom: 25px;
  padding: 5px 10px;
  // background: #FFFFFF;
  // border-radius: 10px;

  .btnText {
    font-size: 12px;
    font-weight: 400;
    color: #B1B5C5;
  }

  .btn {
    height: 44px;
    border-radius: 15px;
  }

  .info {
    display: flex;
    align-items: center;

    .leftIcon {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      margin-right: 13px;
    }
  }

  .values {
    display: flex;
    flex-direction: column;
  }

  .infoUp {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    div {
      line-height: 1;
    }

    .value {
      font-size: 15px;
      font-weight: bold;
      color: #2560F9;
      line-height: 1;
    }

    .unit {
      font-size: 16px !important;
    }
  }

  .time {
    font-size: 12px;
    font-weight: 400;
    color: #B1B5C5;
    line-height: 1;
  }
}

.nav {
  :deep(.van-nav-bar) {

    .van-badge__wrapper,
    .van-nav-bar__title {
      color: #fff;
    }
  }

  .orderselet {
    padding: 0 5px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #6A93C6;
    color: #ffffff;
    border-radius: 4px;
    font-size: 13px;

    i {
      margin-left: 2px;
    }
  }
}
</style>